<template>
	<view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white shadow foot">
			<block v-for="(item,index) in _tabbars.list" :key="item.name">
				<view v-if="!item.child" class="action" :class="PageCur==item.name?'text-green':'text-gray'" @click="NavChange"
				 :data-cur="item.name" :data-path="item.path">
					<view :class="item.icon">
						<view class="cu-tag badge" v-if="item.badge&&item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					{{item.text}}
				</view>
				<view v-else class="action add-action text-gray" @click="togglePopup" :data-cur="item.name">
					<button class="cu-btn cuIcon-add bg-green shadow" v-if="popupName==''"></button>
					<button class="cu-btn cuIcon-close bg-cyan shadow rotate360" v-else></button>
					{{item.text}}
				</view>
			</block>
		</view>
		<!-- 底部发布弹窗 -->
		<uni-popup ref="popupTabbar" :type="type" :custom="true" @change="change">
			<view class="uni-popupTabbar">
				<!--<view class="uni-popupTabbar-title">发布</view>-->
				<view class="uni-popupTabbar-content">
					<view v-for="(item, index) in _popupTabbarData" :key="index" class="uni-popupTabbar-content-box" :data-path="item.path"
					 @click="goTo">
						<view v-if="item.iconType=='image'" class="uni-popupTabbar-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view v-else :class="item.icon">
							<view class="cu-tag badge" v-if="item.badge||item.badge==''">{{item.badge}}</view>
						</view>
						<view class="uni-popupTabbar-content-text">{{ item.text }}</view>
					</view>
				</view>
				<!--
				<view class="uni-popupTabbar-btn" @click="cancel('popupTabbar')">取消发布</view>
				-->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: 'my-tabbar',
		components: {
			uniPopup
		},
		data() {
			return {
				PageCur: 'home',
				type: 'bottom', //弹出层位置
				popupName: '', //弹出层名字
				popupTabbarData: []
			};
		},
		computed: {
			_tabbars() {
				return this.tabbars;
			},
			_popupTabbarData() {
				return this.popupTabbarData;
			}
		},
		props: {
			tabbars: { //数据列表
				type: Object,
				default () {
					return {}; //{list:[{text: "首页",path: "/pages/index/index",icon: "cuIcon-homefill",iconType: "font", //值image图片 、font字体图标(默认值) badge: "", name: "index",child: []}]}
				}
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur;
				this.$emit("change", this.PageCur);
				this.cancel(this.popupName);
			},
			togglePopup(e) {
				var cur = e.currentTarget.dataset.cur;
				for (var i in this._tabbars.list) {
					var item = this._tabbars.list[i];
					if (item.name == cur) {
						this.popupTabbarData = item.child;
						break;
					}
				}
				if (this.popupName) {
					this.cancel(this.popupName);
				} else {
					this.type = "bottom";
					this.popupName = "popupTabbar";
					this.$refs[this.popupName].open();
				}
			},
			cancel(name) {
				name && this.$refs[name].close();
			},
			change(e) {
				if (!e.show) {
					this.popupName = "";
				}
			},
			goTo: function(e) {
				var url = e.currentTarget.dataset.path;
				this.cancel(this.popupName);
				this.$util.goTo(url);
			}
		}
	}
</script>

<style>
	.cu-bar.tabbar .action {
		font-size: 24rpx;
	}

	.cu-bar.tabbar.foot {
		height: calc(105rpx + env(safe-area-inset-bottom) / 2);
	}

	.cu-tabbar-height {
		min-height: 122rpx;
		height: calc(122rpx + env(safe-area-inset-bottom) / 2);
	}

	.uni-popup {
		z-index: 1100;
	}

	/* 底部分享 */
	.uni-popupTabbar {
		position: relative;
		background: #fff;
		margin-left: 50rpx;
		margin-right: 50rpx;
		border-radius: 20rpx;
		box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
		margin-bottom: 163rpx;
	}

	.uni-popupTabbar-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
		;
	}

	.uni-popupTabbar-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
		position: relative;
	}

	.uni-popupTabbar-content::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #ffffff;
		border-radius: 40px;
		z-index: 2;
	}

	.uni-popupTabbar-content:after {
		content: '';
		position: absolute;
		bottom: -16upx;
		left: 0;
		right: 0;
		margin: auto;
		width: 50upx;
		height: 50upx;
		transform: rotate(45deg);
		background: #fff;
		z-index: 1;
		border: none;
		box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
		border-radius: 2px;
	}



	.uni-popupTabbar-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: 33%;
		box-sizing: border-box;
		z-index: 3
	}

	.uni-popupTabbar-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;
		border-radius: 10upx;
	}

	.uni-popupTabbar-content-image .image {
		width: 100%;
		height: 100%;
	}

	.uni-popupTabbar-content-text {
		font-size: $uni-font-size-base;
		color: $uni-color-subtitle;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-popupTabbar-btn {
		height: 90rpx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		color: #666;
	}
</style>
